import React from 'react';
import {bindActionCreators} from 'redux';
import * as serviceActionCreator from '../../actions/service-actions';
import {connect} from 'react-redux';
import WebView from 'react-native-webview';
import {Platform} from 'react-native';

class CheckoutScreen extends React.PureComponent {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: '付款',
  });

  render() {
    const {form} = this.props;
    const content = `<!DOCTYPE html>
<html>
  <head>
    <title>Messaging</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=320, user-scalable=no">
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font: 62.5% arial, sans-serif;
      }
      .btn {
       margin: 22px;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <form action="https://payment.ipay88.com.my/ePayment/entry.asp" method="post">
                                <input type="hidden" name="MerchantCode" value="${form.MerchantCode}"></input>
                                <input type="hidden" name="PaymentId" value="${form.PaymentId}"></input>
                                <input type="hidden" name="RefNo" value="${form.RefNo}"></input>
                                <input type="hidden" name="Amount" value="${form.Amount}"></input>
                                <input type="hidden" name="Currency" value="${form.Currency}"></input>
                                <input type="hidden" name="ProdDesc" value="${form.ProdDesc}"></input>
                                <input type="hidden" name="UserName" value="${form.UserName}"></input>
                                <input type="hidden" name="UserEmail" value="${form.UserEmail}"></input>
                                <input type="hidden" name="UserContact" value="${form.UserContact}"></input>
                                <input type="hidden" name="Remark" value=""></input>
                                <input type="hidden" name="Lang" value="UTF-8"></input>
                                <input type="hidden" name="SignatureType" value="${form.SignatureType}"></input>
                                <input type="hidden" name="Signature" value="${form.Signature}"></input>
                                <input type="hidden" name="ResponseURL" value="${form.ResponseURL}"></input>
                                <input type="hidden" name="BackendURL" value="${form.BackendURL}"></input>
                                <input type="submit" value="支付" className="btn"></input>
                            </form> 
    <script>
    </script>
  </body>
</html>`;
    // console.log(content);
    // <HTML html={content} imagesMaxWidth={Dimensions.get('window').width} />
    return <WebView source={{html: content}} />;
  }
}

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  form: state.checkoutForm,
});

const mapDispatchToProps = dispatch => ({
  serviceActions: bindActionCreators(serviceActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(CheckoutScreen);
